<template>
  <div>
    <h3>计算属性</h3>
    <input type="text" v-model="xing">
    <input type="text" v-model="ming">
    <p>{{fullName}} </p>
    <p>{{fullName}} </p>
    <p>{{fullName}} </p>
   

    <h3>方法</h3>
    <p>{{name()}} </p>
    <p>{{name()}} </p>
    <p>{{name()}} </p>
  </div>
</template>

<script>

export default {
  data(){
    return {
      xing: '张',
      ming:'三'
    }
  },
  // 计算属性写在data平级的computed中
  computed:{
    // 计算属性,都写到这里 要有返回值
    fullName(){
      console.log('计算属性调用了');
      return this.xing + this.ming
    }
  },
  methods:{
    name(){
      console.log('方法被调用了');
      return this.xing + this.ming
    }
  }
  
}
</script>

<style>

</style>